<script setup lang="ts">
const visible = defineModel<boolean>('visible', { required: true })

const activities = [...Array(10)].map(() => '14:59:40 2024-01-01')

const tablePage = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0,
})

// #region UI Listener
function cancel() {
    visible.value = false
}

function closed() {

}

function open() {

}

function handleSizeChange(val: number) {
    tablePage.pageSize = val
}
function handleCurrentChange(val: number) {
    tablePage.currentPage = val
}
// #endregion
</script>

<template>
    <PlusDialog v-model="visible"
                title="沟通记录"
                close-on-press-escape
                width="800"
                :has-footer="false"
                @cancel="cancel"
                @closed="closed"
                @open="open"
    >
        <div class="max-h-[600px] overflow-y-auto">
            <el-timeline>
                <el-timeline-item v-for="(activity, index) in activities"
                                  :key="index"
                                  :timestamp="activity"
                                  placement="top"
                >
                    <div class="flex gap-[20px]">
                        <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.p9N4LqKEfaJ2AewVtiYTiAAAAA?rs=1&pid=ImgDetMain"
                             alt=""
                             width="40"
                             height="40"
                        >

                        <div>
                            <span class="font-semibold">张三</span>

                            <span class="p-4 ml-[8px] bg-slate-100 text-[12px]">
                                置业顾问
                            </span>

                            <p class="mt-8 leading-[24px] w-[500px]">
                                您好，很高兴为您服务，请问有什么可以帮你？您好，很高兴为您服务，请问有什么可以帮你？您好，很高兴为您服务，请问有什么可以帮你？您好，很高兴为您服务，请问有什么可以帮你？
                            </p>
                        </div>
                    </div>
                </el-timeline-item>
            </el-timeline>
        </div>

        <el-pagination v-model:current-page="tablePage.currentPage"
                       :page-size="tablePage.pageSize"
                       layout="prev, pager, next, sizes, jumper"
                       :total="tablePage.total"
                       background
                       class="mt-20 justify-center"
                       :page-sizes="[10, 20, 30]"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
        />
    </PlusDialog>
</template>

<style scoped>
:deep(.el-timeline-item__tail) {
    left: 125px;
}

:deep(.el-timeline-item__node) {
    left: 120px;
}

:deep(.el-timeline-item__timestamp) {
    width: 80px;
    text-align: center;
    /* line-height: 16px; */
}

:deep(.el-timeline-item__wrapper) {
    display: flex;
    gap: 40px;
    padding-top: 8px;
}
</style>
